{% extends 'base.html' %}

{% block main_content %}
    <div class="ae-message">
    	说明：本工具为Google日历添加按年份重复的农历生日，填写完相关信息后导出ics文件，将导出的ics文件导入到google日历里。
    </div>
	<div id="validate-info" class="ae-errorbox" style="display:none">
	</div>
	<div class="ae-message ae-rounded-sml spur-cal-form">
		<form id="cal-form" method="POST" action="/cal">
			<div class="label-row">
				<label for="summary">内容:</label>
			</div>
			<div class="input-row">
				<input id="summary" name="summary" class="text fieldinput"/>
			</div>
			
			<div class="label-row">
				<label for="date">农历生日:</label>
			</div>
			<div class="input-row">
				<input id="birthday" name="birthday" class="text" type="text" readonly="readonly" />
				<div id="calContainer" style="display:none;position:absolute;z-index:10001"></div>
			</div>
			
			<div class="label-row">
				<label>年份范围:</label>
			</div>
			<div class="input-row">
				<select id="start-year" name="startYear" >
					{% for y in range(1980, 2050) %}
					<option value="{{ escape(str(y)) }}" {% if y==2009 %}selected="selected"{% end %} >{{ escape(str(y)) }}</option>
					{% end %}
				</select> 
				到
				<select id="end-year" name="endYear" />
				    {% for y in range(1980, 2050) %}
					<option value="{{ escape(str(y)) }}" {% if y==2019 %}selected="selected"{% end %} >{{ escape(str(y)) }}</option>
					{% end %}
				</select>
			</div>
			
			<div class="label-row">
				<label for="location">地点:</label>
			</div>
			<div class="input-row">
				<input name="location" class="text fieldinput"/>
			</div>
			
			<div class="label-row">
				<label for="description">描述:</label>
			</div>
			<div class="input-row">
				<textarea name="description" style="height:80px;"></textarea>
			</div>
			
			<div class="input-row">
				<!--
				<input type="button" value="添加到谷歌日历" />&nbsp;&nbsp;
				-->
				<input type="submit" value="生成ics文件" />
			</div>
			{{ xsrf_form_html() }}
		</form>
	</div>
{% end %}

{% block scripts %}
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/calendar/assets/skins/sam/calendar.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="/static/scripts/lunarbirthday.js"></script>
{% end %}